<!DOCTYPE html>
<html>
  <head>
    <title>mockEditor1.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/jsoneditor.css">
	
<link rel="stylesheet" href="css/main.css"/>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
	<meta charset="UTF-8">
  </head>
  <body>
  
      <div class="container">
	  
	  
	<div class="row">
		<div class="col-md-7">
			<div class="panel panel-success">
			  <div class="panel-body">
				这里可以生成各种随机数据 
			  </div>
			  <div class="panel-footer">
			  		<!-- Nav tabs -->
			<ul class="nav nav-tabs">
			  <li><a href="#json" data-toggle="tab">生成json数据</a></li>
			  <li><a href="#compare" data-toggle="tab">数据比对</a></li>
			  <li><a href="#randomData" data-toggle="tab">生成随机数据</a></li>
			</ul>

			<!-- Tab panes -->
			<div class="tab-content">
			  <div class="tab-pane active" id="json">
			  <div id="sourceEditor" style="width:100%;height:400px"></div>
				<div class="btn-group btn-group-justified">
				  <a class="btn btn-default" role="button" id="historyTpl">历史数据模板</a>
				  <a class="btn btn-default" role="button" id="saveTpl" data-toggle="modal" data-target="#saveFileModal">保存模板</a>
				  <a class="btn btn-primary" role="button" id="runJson">生成数据</a>
				  <a class="btn btn-default" role="button" id="clearTpl">清空</a>
				</div>
			  </div>
			  <div class="tab-pane" id="compare">
			  
			  <div class="row">
			  	<div class="col-md-6"><ol id="file1" class="file"></ol></textarea></div>
			  	<div class="col-md-6"><ol id="file2" class="file"></ol></div>
			  </div>
			  
			  </div>
			  <div class="tab-pane" id="randomData">
				<h3>开发中。。。。</h3>
				  <div class="btn-group btn-group-justified">
					<div class="input-group">
						  <input type="text" class="form-control">
						  <span class="input-group-btn">
							<button class="btn btn-default" type="button">Go!</button>
						  </span>
					</div><!-- /input-group -->
				  </div>
				<h3>name</h3>
				  <div class="btn-group btn-group-justified">
					<a class="btn btn-default" role="button" data-random-type="single" data-random-data="id">18位身份证</a>
					<a class="btn btn-default" role="button" data-random-type="single" data-random-data="guid">GUID</a>
					<a class="btn btn-default" role="button" data-random-type="single" data-random-data="region">省</a>
					<a class="btn btn-default" role="button" data-random-type="single" data-random-data="area">大区</a>
					<a class="btn btn-default" role="button" data-random-type="single" data-random-data="ip">IP地址</a>
					<a class="btn btn-default" role="button" data-random-type="single" data-random-data="domain">域名</a>
					<a class="btn btn-default" role="button" data-random-type="single" data-random-data="email">Email</a>
				  </div>
			  
			  </div>
			</div>
			</div>

			</div>
		
		
		</div>
		<div class="col-md-5">
			<div class="panel panel-success">
				  <div class="panel-body">
					数据结果 
				  </div>
				  <div class="panel-footer">
				  
				  <div id="jsoneditor" style="width: 100%; height: 400px;"></div>
				  <div class="btn-group btn-group-justified">
				  <a class="btn btn-default" role="button" id="export">导出json</a>
				  <a class="btn btn-default" role="button" data-toggle="modal" data-target="#myModal" id="createUrl">生成url</a>
				  <a class="btn btn-default" role="button" id="formatJson">格式化</a>
				  <a class="btn btn-default" role="button" id="clear">清空</a>
				</div>
				  </div>
			</div>
		</div>
	</div>
	  

    </div> <!-- /container -->
  
  
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">你可以直接调用下面的网址，会自动返回数据</h4>
      </div>
      <div class="modal-body">
           <div class="input-group">
			  <span class="input-group-btn">
				<button class="btn btn-default" type="button" id="copy">复制到剪贴板</button>
			  </span>
			  <input type="text" class="form-control" id="generatedUrl">
			</div><!-- /input-group -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Modal -->
<div class="modal fade" id="saveFileModal" tabindex="-1" role="dialog" aria-labelledby="saveFileLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="saveFileLabel">请输入要保存的文件名</h4>
      </div>
      <div class="modal-body">
           <div class="input-group">
		   <input type="text" class="form-control" id="fileName">
			  <span class="input-group-btn">
				<button class="btn btn-primary" type="button" id="savefile">保存</button>
			  </span>
			</div><!-- /input-group -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal -->
<div class="modal fade" id="showHistoryTplModal" tabindex="-1" role="dialog" aria-labelledby="showHistoryTplLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="showHistoryTplLabel">这是你保存过的模板文件,双击打开</h4>
      </div>
      <div class="modal-body" id="historyFiles">
	  

      </div>
      <div class="modal-footer">
	    <button type="button" class="btn btn-primary" id="loadTpl">加载模板</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/server.js"></script>
	<script src="js/fileSaver.js"></script>
	<script src="js/ZeroClipboard.js"></script>
	<script src="js/compare.js"></script>
	<script src="js/jsoneditor.js"></script>
	<script type="text/javascript" src="js/mock.js"></script>
	<script type="text/javascript" src="js/juicer-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
  </body>
</html>